기초코드와 코드도움을 이용한 화면 데이터 관리

화면 개발에 필요한 코드 데이터를 간단하게 처리하기

QCN

왜 코드 데이터 관리가 필요한가?

  • 화면에는 콤보박스, 라디오 버튼, 자동완성 등 공통적으로 사용되는 데이터가 많습니다.
  • 예시: 부서 목록, 직급 목록, 상태 코드(사용/중지), 카테고리 등
  • 이런 데이터를 각 화면마다 하드코딩하면 변경이 있을 때마다 모든 화면을 수정해야 하는 유지보수의 악몽이 시작됩니다.

HandStack은 이런 반복적이고 비효율적인 작업을 해결하기 위해 간단하고 체계적인 데이터 관리 방법을 제공합니다.

QCN

HandStack의 데이터 소스 철학

데이터의 성격과 갱신 주기에 따라 관리 방식을 다르게 접근합니다.

  • 시스템 데이터 (거의 변하지 않음)

    • 예: Y/N, 사용/미사용
    • 소스코드에 하드코딩하거나, 환경 설정 파일(syn.config.json)에 정의하여 관리합니다.

  • 업무 데이터 (수시로 변함)

    • 예: 고객 목록, 상품 카테고리, 공지사항 유형
    • 변경이 잦으므로 데이터베이스에 매번 직접 요청하여 데이터 변경을 위해 배포가 필요 없도록 하거나 원격 파일(JSON)을 통해 관리하여, 정기적으로 데이터 파일을 변경합니다.
QCN

코드 데이터 테이블

ColumnName DataType Length Nullable ColumnDescription
GroupCode varchar 10 NO 그룹코드 ID
CodeID varchar 10 NO 코드 ID
CodeValue nvarchar 50 YES 코드 값
CategoryID varchar 30 YES 분류 ID
Value1 nvarchar 100 YES 사용자 정보 1
Value2 nvarchar 100 YES 사용자 정보 2
Value3 nvarchar 100 YES 사용자 정보 3
Value4 nvarchar 100 YES 사용자 정보 4
Value5 nvarchar 100 YES 사용자 정보 5
Comment nvarchar 200 YES 코드 및 사용자 정보 설명
SortingNo int -1 YES 정렬순서
CreatedUserNo varchar 32 YES 사용자 ID
CreatedAt datetime2 -1 YES 작성일시
QCN

코드 도움 데이터 테이블

ColumnName DataType Length Nullable ColumnDescription
CodeHelpID varchar 10 NO 코드헬프ID
DataSourceID varchar 30 NO 데이터원본ID
CodeHelpName nvarchar 50 YES 코드헬프명
CommandType char 10 YES 명령구분(기초코드: PGM002)
CommandText nvarchar -1 YES SQL 명령
CodeColumnID varchar 20 YES 코드컬럼ID
ValueColumnID varchar 20 YES 값컬럼ID
UseYN char 1 YES 사용여부
Comment nvarchar 200 YES 설명
CreatedUserNo varchar 32 YES 작성자ID
CreatedAt datetime2 -1 YES 작성일시
QCN

코드 도움 스키마 데이터 테이블

ColumnName DataType Length Nullable ColumnDescription
CodeHelpID varchar 10 NO 코드헬프ID
ColumnID varchar 50 NO 컬럼ID
ColumnText nvarchar 200 YES 컬럼명
HiddenYN bit -1 YES 숨김여부
SortingNo int -1 YES 정렬순서
QCN

2. 코드 데이터 확인하기

$(HANDSTACK_HOME)/modules/wwwroot/wwwroot/assets/shared/code/**

{
    "Comment": "기초코드 데이터",
    "CodeColumnID": "CodeID",
    "ValueColumnID": "CodeValue",
    "CreatedAt": "2012-03-22 오후 2:00:00",
    "Scheme": [
        {
            "ColumnID": "SelectYN",
            "ColumnText": "기본선택여부",
            "HiddenYN": true
        },
        {
            "ColumnID": "LocaleID",
            "ColumnText": "언어권ID",
            "HiddenYN": true
        },
        {
            "ColumnID": "CodeID",
            "ColumnText": "코드ID",
            "HiddenYN": false
        },
        {
            "ColumnID": "CodeValue",
            "ColumnText": "코드값",
            "HiddenYN": false
        }
    ],
    "DataSource": [
        {
            "CodeID": "0",
            "CodeValue": "권한없음",
            "SelectYN": null,
            "LocaleID": "ko-KR"
        },
        {
            "CodeID": "1",
            "CodeValue": "권한존재",
            "SelectYN": null,
            "LocaleID": "ko-KR"
        }
    ]
}
QCN

코드 데이터 사용 항목과 관련 컨트롤

  • 콤보박스
  • 코드도움 팝업
  • 그리드 셀 데이터 타입
  • 업무 JavaScript
  • syn.uicontrols.$select
  • syn.uicontrols.$codepicker
  • syn.uicontrols.$grid
  • syn.uicontrols.$auigrid
QCN

HTML에서 선언적으로 데이터 연결하기

JavaScript 코드 없이 HTML 태그의 속성만으로 데이터 소스를 지정할 수 있습니다.

<select id="ddlFileExtension" syn-options="{dataSourceID: 'CHP001',
storeSourceID: 'COM001', 
parameters: '@GroupCode:COM001;', 
local: false, 
toSynControl: true, 
required: false}"></select>

<syn_codepicker id="chpSubjectID" syn-options="{belongID: 'LD01', 
dataSourceID: 'CHP005', 
local: false, 
isMultiSelect: false, 
textBelongID: ['LD01', 'MD01'], 
textDataFieldID: 'CODETEXT', controlText: '회사'}">
</syn_codepicker>
QCN

데이터 소스 유형별 예제: config (1/3)

<select id="ddlFileExtension" syn-options="{dataSourceID: 'CMM001',
**local: true**,
toSynControl: true, 
required: false}"></select>

...
config: {
    dataSource: {
        CMM001: {
            CodeColumnID: 'CodeID',
            ValueColumnID: 'CodeValue',
            DataSource: [
                {
                    CodeID: '0',
                    CodeValue: '권한없음'
                },
                {
                    CodeID: '1',
                    CodeValue: '권한존재'
                }
            ]
        }
    }
}
...
QCN

데이터 소스 유형별 예제: remote (2/3)

syn.config.json 설정의 SharedAssetUrl 항목에 기본 경로 관리

<select id="ddlFileExtension" syn-options="{**dataSourceID: 'CMM003'**,
local: true,
toSynControl: true, 
required: false}"></select>
QCN

데이터 소스 유형별 예제: transaction (3/3)

<select id="ddlFileExtension" syn-options="{dataSourceID: 'CHP001',
storeSourceID: 'COM001', 
parameters: '@GroupCode:COM001;', 
local: false, 
toSynControl: true, 
required: false}"></select>

$(HANDSTACK_HOME)/modules/transact/module.json

  • IsCodeDataCache: true
  • CodeDataCacheTimeout: 20

http://localhost:8421/transact/api/transaction/cache-clear?cacheKey=

QCN

코드 도움 데이터 적용하기

<syn_codepicker id="txtREPLACEMENT_EMPLOYEE_NO" 
syn-datafield="REPLACEMENT_EMPLOYEE_NO" 
syn-options="{belongID: ['MD01'], 
dataSourceID: 'CHP007', 
parameters: '@DepartmentID:;', 
local: false, 
textBelongID: ['GD01', 'MD01'], 
textDataFieldID: 'REPLACEMENT_EMPLOYEE_NAME', 
readonly: true, 
controlText: '직원조회', 
url: '/assets/shared/codehelp/index2.html'}"></syn_codepicker>
QCN

그리드에 코드 데이터 적용하기

['ReturnType', '반환결과', 80, false, 'dropdown', false, 'left', null, {
    dataSourceID: 'ReturnType',
    required: true,
    local: true
}],
['I_COMPNAY_CATEGORY', '회사명', 170, false, 'dropdown', false, 'left','MD01', {
    dataSourceID: 'CHP001',
    storeSourceID: 'EZW024',
    parameters: '@GroupCode:EZW024;',
    local: false,
    validators: ['required']
}],
['USER_NAME', '직원명', 100, false, 'codehelp', false, 'left', 'MD01', {
    validators: ['required'],
    dataSourceID: 'CHP001',
    parameters: '@DEPARTMENT_NO:;',
    local: false,
    codeColumnID: 'USER_ID',
    controlText: '직원조회',
    url: '/assets/shared/codehelp/index2.html'
}],
QCN

요약 정리 및 Q&A

  • HandStack을 사용하면 화면 공통 코드를 매우 쉽게 관리할 수 있습니다.
  • HTML에 선언적 방식으로 데이터 소스를 지정하여 코드 가독성과 생산성을 높입니다.
  • 데이터베이스와 관리 화면이 표준으로 제공되어, 데이터 관리 업무가 단순화됩니다.
  • 초급 개발자도 복잡한 설정 없이 데이터 기반의 화면을 빠르게 개발할 수 있습니다.
QCN